<template>
  <div>
    <el-main>
        <el-form
          ref="searchForm"
          size="small"
          :model="searchModel"
          :inline="true"
          @keyup.enter.native="search"
        >
          <el-row :gutter="20">
<!--            <el-col :span="6">-->
<!--              <el-form-item label="类型">-->
<!--                <el-select v-model="searchModel.type" placeholder="请选择类型">-->
<!--                  <el-option :value="0" label="模板"></el-option>-->
<!--                  <el-option :value="1" label="优惠卷"></el-option>-->
<!--                </el-select>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            <el-col :span="6">-->
<!--              <el-form-item label="会员名称">-->
<!--                <el-input-->
<!--                  placeholder="请输入会员名称"-->
<!--                  v-model="searchModel.name"-->
<!--                  clearable/>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
            <el-col :span="4">
              <el-form-item label="金额从">
                <el-input
                  placeholder="请输入最低金额"
                  v-model="searchModel.moneyStart"
                  clearable/>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="到">
                <el-input
                  placeholder="请输入最高金额"
                  v-model="searchModel.moneyEnd"
                  clearable/>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="订单限额从">
                <el-input
                  placeholder="请输入最低订单限额"
                  v-model="searchModel.orderMinStart"
                  clearable/>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="到">
                <el-input
                  placeholder="请输入最高订单限额"
                  v-model="searchModel.orderMinEnd"
                  clearable/>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-button icon="el-icon-refresh" size="small" @click="resetSearch"
              >重置
              </el-button>
              <el-button
                type="primary"
                icon="el-icon-search"
                size="small"
                @click="search"
              >搜索
              </el-button
              >
              <el-link type="primary" :underline="false" @click="searchAll = true" style="margin-left: 10px" v-if="!searchAll">展开<i class="el-icon-bottom el-icon--right"></i></el-link>
              <el-link type="primary" :underline="false" @click="searchAll = false" style="margin-left: 10px" v-if="searchAll">收起<i class="el-icon-top el-icon--right"></i></el-link>
            </el-col>
          </el-row>
          <el-row :gutter="20" v-if="searchAll">
            <el-col :span="8">
              <el-form-item label="失效时间">
                <el-date-picker
                  v-model="searchModel.endTime"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始失效时间"
                  end-placeholder="结束失效时间"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="状态">
                <el-select v-model="searchModel.status" placeholder="请选择状态" clearable>
                  <el-option :value="1" label="启用"></el-option>
                  <el-option :value="2" label="已使用"></el-option>
                  <el-option :value="0" label="禁用"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="创建时间">
                <el-date-picker
                  v-model="searchModel.createTime"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始创建时间"
                  end-placeholder="结束创建时间"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      <el-table
        ref="table"
        :data="tableData.records"
        :border="true"
        style="width: 100%"
        size="small"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
<!--        <el-table-column-->
<!--          prop="type"-->
<!--          label="类型"-->
<!--          :formatter="typeFormatter"-->
<!--          show-overflow-tooltip-->
<!--        ></el-table-column>-->
        <el-table-column
          prop="money"
          label="金额"
          :formatter="moneyFormatter"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="orderMin"
          label="订单限额"
          :formatter="orderMinFormatter"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="endTime"
          label="失效时间"
          :formatter="endTimFormatter"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          :formatter="statusFormatter"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="sortIndex"
          label="排序"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          :formatter="datetimeFormatter"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column label="操作" width="240">
          <template #default="{ row }">
            <el-link type="primary" :underline="false" icon="el-icon-plus" @click="handleGrant(row)" >发放优惠卷</el-link>
            <el-link type="primary" :underline="false" icon="el-icon-edit" @click="handleUpdate(row)" >编辑</el-link>
            <el-link type="primary" :underline="false" icon="el-icon-delete" @click="handleDelete(row)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <pagination
          v-show="tableData.total > 0"
          :total="tableData.total"
          :page.sync="tableData.current"
          :limit.sync="tableData.size"
          @pagination="search"
        />
      </div>
      <el-footer>
        <el-button type="primary"
                   icon="el-icon-plus"
                   size="small"
                   @click="handleInsert"
        >新增
        </el-button
        >
        <el-button type="primary"
                   icon="el-icon-unlock"
                   size="small"
                   @click="handleEnables"
        >启用
        </el-button
        >
        <el-button type="primary"
                   icon="el-icon-lock"
                   size="small"
                   @click="handleDisables"
        >禁用
        </el-button
        >
        <el-button type="primary"
                   icon="el-icon-delete"
                   size="small"
                   @click="handleDeletes"
        >删除
        </el-button
        >
      </el-footer>
    </el-main>
  </div>
</template>

<script>
  import Pagination from "@/components/Pagination";
  import {deleteCoupon,deletesCoupon,enablesCoupon,disablesCoupon,viewCoupon,pageCoupon} from "@/api/order/coupon";
  import {CouponType} from "@/utils/constant/couponType";
  import {Status} from "@/utils/constant/couponStatus";
  import {parseTime} from "@/utils/common";
  import {ApiError} from "@/utils/errors";

  export default {
    components: {Pagination},
    data() {
      return {
        Status,
        searchAll: false,
        selection:[],
        searchModel:{
          type: 0
        },
        tableData: {
          records: [],
          total: 0,
          current: 1,
          size: 10
        }
      }
    },
    created() {
      this.search();
    },
    methods: {
      handleSelectionChange(selection){
        this.selection = selection;
      },
      handleInsert() {
        this.$router.push({path: "coupon-insert"});
      },
      handleUpdate(row) {
        this.$router.push({path: "coupon-update",query:{id:row.id}});
      },
      handleGrant(row) {
        this.$router.push({path: "coupon-grant",query:{id:row.id}});
      },
      handleDelete(row) {
        this.$confirm(`是否删除优惠卷${row.name} ?`, "提示", {
          type: "warning"
        })
          .then(() => {
            const params = {
              id: row.id
            };
            deleteCoupon(params).then(res => {
              if (res.status == 200) {
                if (!res.data.success) {
                  return this.$message.error(ApiError.msg(res.data.message));
                }
                this.$message.success("删除优惠卷成功");
                this.search();
              }
            });
          })
          .catch(() => {});
      },
      handleDeletes() {
        this.$confirm(`是否删除选中的${this.selection.length}个商品?`, "提示", {
          type: "warning"
        })
          .then(() => {
            const params = {
              ids: this.selection
            };
            deletesCoupon(params).then(res => {
              if (res.status == 200) {
                if (!res.data.success) {
                  return this.$message.error(ApiError.msg(res.data.message));
                }
                this.$message.success(`成功删除${res.data.data.count}个商品`);
                this.search();
              }
            });
          })
          .catch(() => {});
      },
      handleEnables() {
        const params = {
          ids: this.selection
        };
        enablesCoupon(params).then(res => {
          if (res.status == 200) {
            if (!res.data.success) {
              return this.$message.error(ApiError.msg(res.data.message));
            }
            this.$message.success(`成功启用${res.data.data.count}个优惠卷`);
            this.search();
          }
        });
      },
      handleDisables() {
        const params = {
          ids: this.selection
        };
        disablesCoupon(params).then(res => {
          if (res.status == 200) {
            if (!res.data.success) {
              return this.$message.error(ApiError.msg(res.data.message));
            }
            this.$message.success(`成功禁用${res.data.data.count}个优惠卷`);
            this.search();
          }
        });
      },
      handleView(row){
        const params = {id:row.id};
        viewCoupon(params).then(res => {
          if (res.status == 200) {
            if (res.data.errors) {
              return this.$message.error(ApiError.msg(res.data.errors));
            }
          }
        });
      },
      search() {
        const params = {
          type: this.searchModel.type,
          moneyStart: this.searchModel.moneyStart,
          moneyEnd: this.searchModel.moneyStart,
          orderMinStart: this.searchModel.orderMinStart,
          orderMinEnd: this.searchModel.orderMinEnd,
          status: this.searchModel.status,
          current: this.tableData.current,
          size: this.tableData.size
        };
        if(this.searchModel.endTime){
          params.endTimeStart = this.searchModel.endTime[0];
          params.endTimeEnd = this.searchModel.endTime[1];
        }
        if(this.searchModel.createTime){
          params.createTimeStart = this.searchModel.createTime[0];
          params.createTimeEnd = this.searchModel.createTime[1];
        }
        pageCoupon(params).then(res => {
          if (res.status == 200) {
            if (!res.data.success) {
              return this.$message.error(ApiError.msg(res.data.message));
            }
            const data = res.data.data;
            this.tableData.records = data.records;
            this.tableData.total = data.total;
            this.tableData.current = data.current;
            this.tableData.size = data.size;
          }
        });
      },
      resetSearch(){
        this.searchModel.type = 0;
        this.searchModel.moneyStart = null;
        this.searchModel.moneyEnd = null;
        this.searchModel.orderMinStart = null;
        this.searchModel.orderMinEnd = null;
        this.searchModel.endTime = null;
        this.searchModel.status = null;
        this.searchModel.createTime = null;
      },
      typeFormatter(row) {
        return CouponType[row.type]["name"];
      },
      moneyFormatter(row) {
        return row.money/100+'元';
      },
      orderMinFormatter(row) {
        return row.orderMin/100+'元';
      },
      endTimFormatter(row) {
        return parseTime(row["endTime"]);
      },
      statusFormatter(row) {
        return Status[row.status]["name"];
      },
      datetimeFormatter(row) {
        return parseTime(row["createTime"]);
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "@/styles/full-form";
  @import "@/styles/common-table";
</style>
